<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>公文审批详情-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart style="background-color: #fff;">
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left">
	  		 <a href="<%=basePath %>/ls/official/approval" class="icon icon-109 f-white">返回</a > 
	  		</div>
	    	<h1 class="weui-header-title">公文审批详情</h1>
	    </div>
		<div class="weui_tab_bd" style="padding-bottom: 95px;">
			<div class="weui_panel_bd">
                <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
                    <div class="weui_media_bd">
                        <h4 class="weui_media_title">${detail.applyerName }</h4>
                        <p class="weui_media_desc">
                        	<span class="f-green">${detail.nextStatusText }</span>
                        </p>
                    </div>
                </a>
			</div>
			
			<div class="weui_cells" style="margin-top:0;">
				<div class="weui_cell">
					<div class="weui_cell_bd weui_cell_primary">
						<span class="f-graybc">申请内容：</span>${detail.applyContent }
					</div>
				</div>
				<c:if test="${not empty detail.attachList }">
					<div class="weui_cell xtbg-add-list-title">
						<div class="weui_cell_bd weui_cell_primary">
							<p class="f14">文件列表</p>
						</div>
					</div>
					<div class="weui_cell">
						<ul class="img-click" style="width: 100%;">
							<c:forEach var="item" items="${detail.attachList }">
								<c:if test="${item.attachmentType == 'image' }">
									<li class="weui_uploader_file img-click" style="margin-right:0;margin-bottom:10px;position: relative;">
										<img onclick="imgClick(this)" src="${config.imgUrl }${item.attachmentUrl}"/>
									</li>
								</c:if>
							</c:forEach>
							<c:forEach var="item" items="${detail.attachList }">
								<c:if test="${item.attachmentType != 'image' }">
									<li class="upload_info">
										<span class="file_name">${item.attachmentName }</span>
										<div class="set">
											<a href="${config.imgUrl }${item.attachmentUrl}">
												<span class="preview">预览</span>
											</a>
										</div>
									</li>
								</c:if>
							</c:forEach>
						</ul>
					</div>
				</c:if>
				<div class="timeline">
				  	<ul>
				  		<li class="timeline-item"> 
				  			<div class="timeline-item-head-first"> 
				  				<i class="weui_icon weui_icon_success_no_circle timeline-item-checked"></i> 
				  			</div> 
				  			<div class="timeline-item-tail"></div> 
				  			<div class="timeline-item-content"> 
				  				<div class="weui_panel_bd gzsp-timeline-flow">
					                <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
					                    <div class="weui_media_bd">
					                        <h4 class="weui_media_title">${detail.applyerName }</h4>
					                        <p class="weui_media_desc"><span class="f-green">发起申请</span></p>
					                    </div>
					                </a>
								</div>
				  			</div> 
				  		</li>
				  		<c:forEach var="req" items="${detail.reqList }" varStatus="status" begin="${detail.status == '001' ? 0 : 1 }">
					  		<li class="timeline-item"> 
					   			<c:choose>
					   				<c:when test="${req.status == '000'}">
					   					<div class="timeline-item-head-first"> 
							  				<i class="weui_icon weui_icon_success_no_circle timeline-item-checked"></i> 
							  			</div> 
					   				</c:when>
					   				<c:when test="${req.status == '003'}">
					   					<div class=""> 
							   				<img class="gzsp-timeline-flow-img" src="<%=basePath %>/images/bohuishenqing@3x.png">
							   			</div> 
					   				</c:when>
					   				<c:otherwise>
					   					<div class=""> 
							   				<img class="gzsp-timeline-flow-img" src="<%=basePath %>/images/wait_icno.png">
							   			</div> 
					   				</c:otherwise>
					   			</c:choose>
					   			<c:if test="${!status.last }">
					   				<div class="timeline-item-tail" style="top: 25px;"></div> 
					   			</c:if>
					   			<div class="timeline-item-content"> 
					   				<div class="weui_panel_bd gzsp-timeline-flow">
						                <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
						                    <div class="weui_media_bd">
						                        <h4 class="weui_media_title">
						                        	<c:choose>
						                        		<c:when test="${req.status == '001' }">${detail.approverName }</c:when>
						                        		<c:when test="${req.status == '002' }">办公室</c:when>
						                        		<c:otherwise>${req.teacherName }</c:otherwise>
						                        	</c:choose>
						                        </h4>
						                        <p class="weui_media_desc">
						                        	<c:choose>
						                        		<c:when test="${req.status == '001'}"><span class="f-yellow2">${req.nextStatusText }</span></c:when>
						                        		<c:when test="${req.status == '000' }"><span class="f-green">${req.statusText }</span></c:when>
		                        						<c:when test="${req.status == '003' }"><span class="f-red">${req.statusText }</span></c:when>
						                        		<c:otherwise>
						                        			<span class="f-yellow2">${req.statusText }</span>
						                        		</c:otherwise>
						                        	</c:choose>
						                        </p>
						                        <c:if test="${req.status == '003'}">
						                        	<p class="weui_media_desc">驳回原因：${req.remarks }</p>
						                        </c:if>
						                        <c:if test="${req.status == '000'}">
						                        	<c:choose>
						                        		<c:when test="${empty detail.executorIds }">
						                        			<p class="weui_media_desc f-yellow2">等待办公室安排执行人</p>
						                        		</c:when>
						                        		<c:otherwise>
						                        			<p class="weui_media_desc">执行人：${detail.executor }</p>
						                        		</c:otherwise>
						                        	</c:choose>
						                        </c:if>
						                    </div>
						                </a>
									</div>
					   			</div> 
					   		</li>
				  		</c:forEach>
				     </ul> 
				</div>
				<c:if test="${(detail.status == '001' && isPrincipal) || (detail.status == '002' && isOfficer)}">
					<div class="weui_cells weui_cells_access" style="margin-top:0;">
						<div class="weui_cell" id="check">
							<div class="weui_cell_bd absolut">
			                    <p>执行人(审批通过后，会通知到执行人)</p>
			                </div>
						</div>
						<div class="gzsp_wrap">
							<ul></ul>
							<div id="addBtn"><span class="add"></span></div>
						</div>
					</div>
				</c:if>
			</div>
		</div>
	</div>
	<c:if test="${(detail.status == '001' && isPrincipal) || (detail.status == '002' && isOfficer)}">
		<section class="weui-menu">
	        <div class="weui-menu-inner" id="rejectSubmit">
	            <span>驳回</span>
	        </div>
	        <div class="weui-menu-inner" id="agreeSubmit">
	            <span>同意</span>
	        </div>
	    </section>
	    
	    <!--弹窗-->				
		<div class="weui_mask ueureiu weui_mask_visible" style="display: none;z-index:600">
		</div>
		<!--End弹窗-->
		<div class="weui_dialog weui_dialog_visible" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);display:none;z-index:700;">
			<div class="weui_dialog_hd">
				<strong class="weui_dialog_title">请输入驳回原因</strong>
			</div>
			<div class="weui_dialog_bd">
				<textarea class="weui-prompt-input" style="height: 80px;width: 95%;" rows="10" id="rejectText"></textarea>
			</div>
			<div class="weui_dialog_ft">
				<a href="javascript:;" id="rejectCancel" class="weui_btn_dialog default">取消</a>
				<a href="javascript:;" id="rejectSure" class="weui_btn_dialog primary">确定</a>
			</div>
		</div>
		
		<!-- 老师组织架构 start-->
		<div id="ls_div_box" class="weui_tab tab-bottom" style="display:none;z-index: 600;background-color: #f8f8f8;">
			<div class="weui_tab_bd">
		        <div class="weui-header bg-blue"> 
		        	<div class="weui-header-left" id="teacherBack"> <a class="icon icon-109 f-white">取消</a>  </div>
					<h1 class="weui-header-title">执行人列表</h1>
				</div>
		        
		        <!--下拉选择-->
		        <div class="page-bd">  
			         <ul id="teacherList">
			     	 </ul>
			    </div>
 				<script id="teacher-table-template" type="text/x-handlebars-template">	
 				<div class="js-categoryInner">
	               <div class="weui_cells" style="margin: 0;">
						<ul class="list_3">
							{{#each list}}
				            <li>
								<div class="weui_cell_hd list_c3" style="display: inline-flex;padding-left: 10px;">
									<label class="weui_cells_checkbox weui_check_label" style="padding-right: 15px;" for="{{id}}">
										<input type="checkbox" class="weui_check" value="{{id}}" id="{{id}}" name="{{name}}">
			        					<i class="weui_icon_checked"></i>
									</label>{{name}}
								</div>
							</li>
							{{/each}}
				        </ul>
					</div>
	            </div>
			</script>
		    <!--End下拉选择-->
			</div>
			<div class="weui_tabbar ">
				<div class="fsdx_tabbar">
		            <span class="left">
						<div class="weui-flex">
		                	<span style="margin-top: 13px;margin-left: 0px;">
							<label class="weui_cells_checkbox weui_check_label" for="teacherAll">
								<div class="weui_cell_hd">
									<input type="checkbox" class="weui_check" id="teacherAll">
					        		<i class="weui_icon_checked"></i>
								</div>
							</label>
							</span>
		                   	<p class="weui-flex-item"> 全选</p>
		                </div>
					</span>
		            <span class="left pl20">人数：<label id="teacherCount">0</label></span>
		            <span class="right" id="teacherSure"><a href="javascript:">确定</a></span>
		        </div>
			</div>
		</div>
		<script>
			var teacherData = {};
			$(function() {
				initApprover();
				//老师组织架构返回
				$("#teacherBack").click(function() {
					$('.ueureiu').hide();
					$("#ls_div_box").hide();
					loadTeacherHtml(teacherData);
				});
				//老师组织架构返回
				$("#teacherBack").click(function() {
					$('.ueureiu').hide();
					$("#ls_div_box").hide();
					$("#teacherCount").html(0);
					$("#teacherAll")[0].checked = false;
					loadTeacherHtml(teacherData);
				});
		      	//老师组织架构全选
		      	$("#teacherAll").click(function() {
		      		if(this.checked) {
		      			var list = $("#teacherList").find("input");
		      			list.each(function(i, v){
							v.checked = true;
						});
		      		}else {
		      			var list = $("#teacherList").find("input:checked");
		      			list.each(function(i, v){
							v.checked = false;
						});
		      		}
		 				$("#teacherCount").html($("#teacherList").find(".list_c3 input:checked").length);
		      	})
				//老师组织架构弹出
			  	$("#addBtn").click(function() {
			  		//上下级拉动
					$("#teacherList .js-category").each(function(i, v) {
			    		v.removeEventListener("click", categoryClick, false);
			    		v.addEventListener('click', categoryClick);
			    	})
			  		$('.ueureiu').show();
			  		$("#ls_div_box").show();
					$(".list_c3 input").change(function() {
						$("#teacherCount").html($("#teacherList").find(".list_c3 input:checked").length);
					});
			  	})
			  	$("#teacherSure").click(function() {
		      		$('.ueureiu').hide();
					$("#ls_div_box").hide();
					var list = $("#teacherList").find(".list_c3 input:checked");
					if(list.length == 0){
						$(".gzsp_wrap>ul").html("");
					}else {
						var html = "";
						list.each(function(i, e){
							var obj = $(e);
							var name = obj.attr("name");
							html += "<li><div class='gzsp'><span>"+name.substr(name.length-2,name.length)+"</span><i data-id='"+obj.val()+"'>"+name+"</i></div></li>";
						})
						$(".gzsp_wrap>ul").html(html);
					}
		      	})
		      	$("#agreeSubmit").click(function() {
		      		$.confirm("您确定审批通过吗?","", function() {
		      			agreeSubmit();
		            }, function() {
		                //取消操作
		            });
		      	})
		      	$("#rejectSubmit").click(function() {
	      			$(".weui_mask").addClass("weui_mask_visible").show();
	      			$(".weui_dialog").addClass("weui_dialog_visible").show();
	      			$("#rejectCancel").click(function(){
	      				$("#rejectText").val(null);
	      				$(".weui_mask").hide();
	      				$(".weui_dialog").hide();
	      			});
	      			$("#rejectSure").click(function(){
	      				var text = $("#rejectText").val();
	      				if(text.trim().length > 0) {
	      		      		var params = {
	      		      			id: "${detail.id}",
	      		      			remarks: text
	      		      		}
	      		      		replySubmit(params);
		      		      	$(".weui_mask").hide();
		      				$(".weui_dialog").hide();
		      				$("#rejectText").val(null);
	      		      	}
	      			});
		      	})
			});
			function replySubmit(params) {
				$.ajax({
		          	url : basePath + "/ls/official/approval/reject",
		  	 		type : "post",
		  	 		dataType : "json",
		  	 		data : params,
		            success: function(data){
		            	if(data.code == '000') {
		            		$.toast("提交成功！");
		            		setTimeout(function() {
		            			window.location.reload();
		            		}, 1000);
		            		return;
		            	}
		            	$.toptips(data.msg);
		            },
		            error: function(xhr, type){
		            	$.toptips("系统异常");
		            }
		         });
			}
			function agreeSubmit() {
				var list = $(".gzsp_wrap").find("i");
				if("${isOfficer}" == "true" && list.length == 0) {
					$.toast("请选择执行人");
					return false;
				}
				var ccList="", ccNameList="";
				list.each(function(i,e) {
					ccList += $(e).attr("data-id");
					ccNameList += $(e).html();
					if((i+1) < list.length){
						ccList += ",";
						ccNameList += ",";
					}
				})
				$.ajax({
					url: basePath + '/ls/official/approval/success',
					type: 'post',
					dataType: 'json',
					data: {
						id: "${detail.id}",
						executorIds: ccList,
						executor: ccNameList
					},
					success: function(data) {
						if(data.code == '000') {
							$.toast("提交成功");
							window.location.reload();
						}else {
							$.toptips(data.msg);
						}
					},
		            error: function(xhr, type){
		            	$.toptips("系统异常");
		            }
				});
			}
			function initApprover() {
				$.ajax({
					url: basePath + '/ls/official/approval/getExecutor',
					type: 'GET',
					dataType: 'json',
					success: function(data) {
						if(data.data.ccerId != null && data.data.ccerId != undefined){
							var ccerIds = data.data.ccerId.split(",");
							if(ccerIds.length == 1) {
								$(".gzsp_wrap").find("div").remove();
								var name = data.data.ccer;
								$(".gzsp_wrap>ul").append("<li><div class='gzsp'><span>"+name.substr(name.length-2,name.length)+"</span><i data-id='"+data.data.ccerId+"'>"+name+"</i></div></li>");
							}else {
								loadCcerHtml(data.data);
							}
						}else {
							teacherData.list = data.data;
			 				loadTeacherHtml(teacherData);
						}
					}
				});
			}
			function loadCcerHtml(data) {
				var ccerIds = data.ccerId.split(",");
				var ccers = data.ccer.split(",");
				var html = '';
				for(var i in ccerIds) {
					var ccerId = ccerIds[i];
					var ccer = ccers[i];
					html += '<li><div class="weui_cell_hd list_c3" style="display: inline-flex;padding-left: 10px;">\
									<label class="weui_cells_checkbox weui_check_label" style="padding-right: 15px;" for="i_'+ccerId+'">\
										<input type="checkbox" class="weui_check" value="'+ccerId+'" id="i_'+ccerId+'">\
										<i class="weui_icon_checked icon-35"></i>\
									</label>\
									<span class="tea_name">'+ccer+'</span>\
								</div>\
							</li>';
				}
				$('#teacherList').addClass("list_3").html(html);
			}
			function loadTeacherHtml(teacherData) {
				var myTemplate = Handlebars.compile($("#teacher-table-template").html());
					Handlebars.registerHelper("equal", function(v1,v2,options) {
		    		if(v1 == v2) {
		    			//满足添加继续执行
		    			return options.fn(this);
		    		}else {
		    			//不满足条件执行{{else}}部分
		    			return options.inverse(this);
		    		}
		    	});
				$('#teacherList').html(myTemplate(teacherData));
			}
			function categoryClick() {
				$parent = $(this).closest('li');
				if($parent.hasClass('js-show')){
		            $parent.removeClass('js-show');
		            $parent.find('i').removeClass('icon-35').addClass('icon-74');
		        }else{
		            $parent.siblings().removeClass('js-show');
		            $parent.addClass('js-show');
		            $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
		            $parent.find('i').removeClass('icon-74').addClass('icon-35');
		        }
			}
			function selectmenu(n){
				var eleMore = document.getElementById("menu_"+n);
				if(eleMore.style.display=="none"){
					eleMore.style.display = 'block';
					$("#cell_"+n).removeClass("icon-74");
					$("#cell_"+n).addClass("icon-35 ");
				}else{
					eleMore.style.display = 'none';
					$("#cell_"+n).removeClass("icon-35");
					$("#cell_"+n).addClass("icon-74");
				}
			}
		</script>
	</c:if>
</body>
</html>